<template>
  <!--
  1:点击输入框显示组织架构
     在输入框绑定focus事件，在事件中调用接口获取组织架构数据
     转换数据并渲染到el-tree显示
  2：选择组织架构某一部门它的值跑到输入框
     el-tree加入点击事件，将值赋值给el-input

    难点：
    1：难到什么都不知道，无法下手
        有插件
        告诉你的负责人
    2：知道一部分，能做一部分(能做的都做了)
       a:只考虑主线完成
          找bug，解决bug
          a1bug:一开始不应该显示暂无数据（聚焦后显示树形结构）
          a2bug:选择部门后el-tree要消失
          a3bug:输入框不应该可以输入
       b:抛出问题
         b1:不知道怎么显示这个结构
             v-if='bol'
             聚焦后为true
         b2:数据什么时候获取不知道
         b3:怎么形成树形结构
         b4:点击后怎么做到将部门名称赋值
    3:技术性难点
       百度，老师，同学....
       可以找负责人了

 -->

  <el-dialog title="新增员工" :visible.sync="isShow" @close="closeEvent">

    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="form.username" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker v-model="form.timeOfEntry" value-format="yyyy-MM-dd" placeholder="请输入入职时间" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="form.formOfEmployment">
          <el-option v-for="item in emplooyeesData.hireType" :key="item.id" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="form.workNumber" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input v-model="form.departmentName" readonly placeholder="请输入部门" @focus="focusEvent" />
        <el-collapse-transition>
          <el-tree v-if="showTree" default-expand-all :data="list" :props="{label:'name',children:'children'}" @node-click="nodeClick" />
        </el-collapse-transition>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker v-model="form.correctionTime" value-format="yyyy-MM-dd" placeholder="请输入转正时间" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="text-align:center">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import emplooyeesData from '@/api/constant/employees'
import { companyDepartment } from '@/api/departments'
import { sysUserPost } from '@/api/employees'
export default {
  data() {
    return {
      showTree: false,
      isShow: false,
      emplooyeesData,
      list: [],
      form: {
        username: '', //	string	非必须		姓名
        mobile: '', //	string	非必须		手机号
        timeOfEntry: '', //	string	非必须		入职时间
        formOfEmployment: '', //	number	非必须		聘用形式
        workNumber: '', //	string	非必须		工号
        departmentName: '', //	string	非必须		组织名称
        correctionTime: '' //	string	非必须		转正时间
      },
      rules: {
        username: [{
          required: true, message: '必填', trigger: 'change'
        }], //	string	非必须		姓名
        mobile: [{
          required: true, message: '必填', trigger: 'change'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '请正确输入手机号',
          trigger: 'change'
        }], //	string	非必须		手机号
        timeOfEntry: [{
          required: true, message: '必填', trigger: 'change'
        }], //	string	非必须		入职时间
        formOfEmployment: [{
          required: true, message: '必填', trigger: 'change'
        }], //	number	非必须		聘用形式
        workNumber: [{
          required: true, message: '必填', trigger: 'change'
        }], //	string	非必须		工号
        departmentName: [{
          required: true, message: '必填', trigger: 'change'
        }], //	string	非必须		组织名称
        correctionTime: [{
          required: true, message: '必填', trigger: 'change'
        }] //	string	非必须		转正时间
      }
    }
  },
  methods: {
    // 获取组织架构数据
    async  focusEvent() {
      this.showTree = true
      if (this.list.length === 0) {
        const res = await companyDepartment()
        this.list = this.changeData(res.data.depts, '')
        console.log('组织架构数据', res)
      }
    },
    // 树形数据转换
    changeData(arr, pid) {
      // 1:找出第一层数据
      // 2:将pid写形形参
      // 3:给找出的每一层加children=[]
      // 4:使用递归找出对应 项子集（子集的pid是自己的id）
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // tree点击事件
    nodeClick(obj) {
      this.showTree = false
      this.form.departmentName = obj.name
      console.log(obj)
    },
    // 确定点击
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          await sysUserPost(this.form)
          this.$message.success('新增员工成功')
          this.isShow = false
          this.$emit('getData')
        }
      })
    },
    closeEvent() {
      this.$refs.form.resetFields()
      this.form = {
        username: '', //	string	非必须		姓名
        mobile: '', //	string	非必须		手机号
        timeOfEntry: '', //	string	非必须		入职时间
        formOfEmployment: '', //	number	非必须		聘用形式
        workNumber: '', //	string	非必须		工号
        departmentName: '', //	string	非必须		组织名称
        correctionTime: '' //	string	非必须		转正时间
      }
    }
  }
}
</script>
<style>
</style>
